import * as moment from 'moment';
import { useEffect, useRef } from 'react';
import QRCode from 'qrcode';
import styles from './style.less';
import { DEFAULT_PRINT_KEY_ORDER, DEFAULT_TICKET_CONTENT } from './util';

interface TicketProps {
  tickets?: Partial<PDATicketConfig>;
  printKeyOrder?: PrintKeyItem[];
  ticketContent?: TicketContentParams;
}

const TicketPreview = (props: TicketProps) => {
  const { printKeyOrder = DEFAULT_PRINT_KEY_ORDER, ticketContent = DEFAULT_TICKET_CONTENT } = props;
  const {
    chargeCode = '',
    officialCode,
    chargeCodeQueryKey = 'orderNo',
    headerTitle,
  } = ticketContent;
  const chargeCodeRef = useRef<HTMLCanvasElement>(null);
  const officialCodeRef = useRef<HTMLCanvasElement>(null);
  console.log('=============+++>', ticketContent);
  useEffect(() => {
    if (chargeCodeRef.current) {
      QRCode.toCanvas(
        chargeCodeRef.current,
        `${chargeCode}?${chargeCodeQueryKey}=${moment().format('YYYYMMDDHHmmssSSS')}${
          (Math.random() * 2000000) >> 1
        }`,
        {
          width: 140,
          margin: 0,
        },
        (error) => {},
      );
    }
    if (officialCodeRef.current && officialCode) {
      QRCode.toCanvas(
        officialCodeRef.current,
        officialCode,
        {
          width: 140,
          margin: 0,
        },
        (error) => {},
      );
    }
  }, [chargeCode, officialCode, printKeyOrder]);
  return (
    <div className={styles.ticketPreview}>
      <h3 className={styles.title}>{headerTitle}</h3>
      {printKeyOrder.map((item) => {
        if (!item.enable) return null;

        if (item.key == 'parkType') {
          return <div className={styles.parkType}>{ticketContent[item.key]}</div>;
        }
        if (item.key == 'chargeCode') {
          return (
            <canvas
              ref={chargeCodeRef}
              width="140px"
              height="140px"
              style={{ marginBottom: '5px' }}
            ></canvas>
          );
        }
        if (item.key == 'chargeCodeTitle') {
          return <div className={styles.wxCode}>{ticketContent[item.key]}</div>;
        }
        if (item.key == 'officialCode') {
          return (
            ticketContent[item.key] && (
              <canvas
                ref={officialCodeRef}
                width="140px"
                height="140px"
                style={{ marginBottom: '5px' }}
              ></canvas>
            )
          );
        }
        if (item.key == 'officialText') {
          return (
            ticketContent[item.key] && (
              <div className={styles.wxCode}>{ticketContent[item.key]}</div>
            )
          );
        }
        if (item.key == 'disclaimer') {
          return (
            ticketContent[item.key] && (
              <div className={styles.extra}>
                <div className={styles.line}>-----------------------------------</div>
                <div className={styles.disclaimer}>{item.title}</div>
                <ul>
                  {ticketContent[item.key].split('\n').map((item) => (
                    <li>{item}</li>
                  ))}
                </ul>
                <div className={styles.line}>-----------------------------------</div>
              </div>
            )
          );
        }
        if (item.key == 'serviceTel') {
          return (
            ticketContent[item.key] && (
              <div className={styles.extra}>
                <div className={styles.others}>
                  {item.title}：{ticketContent[item.key]}
                </div>
              </div>
            )
          );
        }
        return (
          <div className={styles.descItem}>
            <span>{item.title}：</span>
            <span>{ticketContent[item.key]}</span>
          </div>
        );
      })}
    </div>
  );
};

export default TicketPreview;
